'use client';

import Autoplay from 'embla-carousel-autoplay';
import { Carousel, CarouselContent, CarouselItem } from '../ui/carousel';
import QueryImage from './query-image';

export default function ImageCarousel({ imageKeys }: { imageKeys: string[] }) {
  return (
    <Carousel
      className="w-full"
      opts={{ loop: true }}
      plugins={[Autoplay({ delay: 3000 })]}
    >
      <CarouselContent className="h-[300px]">
        {imageKeys.map((key) => (
          <CarouselItem key={key}>
            <div className="w-full h-full flex items-center justify-center">
              <QueryImage
                imageKey={key}
                imgClassName="w-full h-full object-cover"
                wrapperClassName="w-full h-full"
              />
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}
